<template>
  <div class="shoplist">
    <index-login @complete="complete"  v-if="ifLogin"></index-login>
    <div class="imgContainer" v-for="(item, index) in goddsItem" :key="index" >
      <div class="iconDivDiv">
        <collect @complete1="complete1" ref="collect" :isCollect="item.isFavorite" :ids="item.productId"></collect>
      </div>
      <div class="goodsitemDiv" @click="bindViewTap(item.productId)">
        <!-- <div class="imgDiv"></div> -->
        <img class="icon" :src="item.imgUrl">
        <div class="imgPrice">
          <p class="nowPrice" v-if=" indexSelectId !== 2">￥{{item.sellPrice}}</p>
          <p class="nowPrice" v-if="indexSelectId == 2">￥{{item.showPrice}}</p>
          <p class="beforePrice" v-if=" indexSelectId !== 2">￥{{item.showPrice}}</p>
          <p class="beforePriceSelected2" v-if="indexSelectId == 2">￥{{item.sellPrice}}</p>
          <p class="shopNumber">( 库存{{item.inventory}} )</p>
        </div>
        <div class="imgName">
          {{item.productName}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import collect from './collect'
  import indexLogin from '@/components/dialog/index-login'
  export default {
    components:{
      collect,indexLogin
    },
    props: {
      goddsItem: { 
        type: Array,
      },
      selectId:{
        type:Number,
      }
    },
    data() {
      return {
        indexSelectId:'',
        ifLogin:false,
      }
    },
    onLoad(){
      let c = wx.getStorageSync('selectIdNum')
      console.log('首页分类的id',c)
      this.indexSelectId = c
      console.log('商品页的this',this)
    },
    
    methods: {
      complete1(){
        console.log("走的是触发授权框")
        this.ifLogin = true
      },
      complete(){
        // console.log("走的是触发点击事件")
        // // this.$refs.collect.clickCollect()
        // this.$nextTick(() => {
        //     this.$refs.collect.clickCollect()
        // });
      },
      bindViewTap (id) {
          const url = `/pages/goods-indetail/main?aid=${id}&selectId=${this.selectId}`
        // const url = '/pages/goods-indetail/main?aid=' + id;
        wx.navigateTo({ url })
      },
    }
  }
</script>

<style scoped>
.imgContainer{
  width: 100%;
  background: #fff;
  position: relative;
  padding-bottom: 90rpx;
  margin-bottom: 20rpx;
}
.imgDiv{
  height: 560rpx;
  /* width: 750rpx; */
}

.icon{
  width: 750rpx
}
.imgPrice{
  margin-top: 16rpx;
  height: 90rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.imgPrice .nowPrice{
  font-size: 32rpx;
  color: #404040;
}
.imgPrice .beforePrice{
  font-size: 26rpx;
  color: #ababab;
  text-decoration:line-through;
  margin-left: 10rpx;
}
.beforePriceSelected2{
  font-size: 26rpx;
  color: #FF8106;
  margin-left: 10rpx;
}
.shopNumber{
  font-size: 26rpx;
  color: #404040;
  margin-left: 20rpx;
}
.imgName{
  padding: 0 30rpx;
  font-size: 36rpx;
  font-weight: 600;
  color: #000;
  line-height: 54rpx;
  text-align: center;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden; 
  word-break: break-all;
}
</style>